const {
  getMvUrl,
  getMvDetail
} = require("../../api/music");

const app = getApp()

const colors = [
  "#ff00ff",
  "#7AC5CD",
  "#00FFFF",
  "#FF6A6A",
  "#0000FF"
]

// pages/mv-detail/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: "",
    mvInfo: {},
    value: "",
    isConnect: false,
    danmuList: [{
      // 文字
      text: '第 1s 出现的弹幕',
      // 颜色
      color: '#ff0000',
      // 展示时间，秒
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id);
    getMvUrl(options.id).then(res => {
      this.setData({
        url: res.data.data.url
      })
    })
    getMvDetail(options.id).then(res => {
      this.setData({
        mvInfo: res.data.data
      })
    })
    // 创建链接
    app.globalData.userInfoPromise.then(res => {
      const userInfo = app.globalData.user;
      // 数据放在this上，方便后续使用
      // 用户名
      this.userName = userInfo.loginName;
      this.setData({
        userName: this.userName
      })
      // 分组id，标示聊天室的,使用帖子id作为groupId,来区分不同帖子的聊天室
      this.groupId = "web09-mv" + options.id
      this.nickName = userInfo.userName
      this.avatar = userInfo.avatar
      // 1. 建立链接（需要配置域名）
      wx.connectSocket({
        url: `wss://showme.myhope365.com/websocketChat?username=${this.userName}&password=123&courseId=${this.groupId}&nickName=${this.nickName}&avatar=${this.avatar}`,
      })

      wx.onSocketOpen((result) => {
        // 链接建立成功
        this.setData({
          isConnect: true
        })
        const getHistoryMsg = {
          cmd: 19, // 命令 
          type: 1, // 类型 固定值
          groupId: this.groupId, //  分组的id
          userId: this.userName // 用户id（这里可以用loginName）
        }
        // 1. 发送获取历史消息指令
        wx.sendSocketMessage({
          data: JSON.stringify(getHistoryMsg),
        })
        // 做一个心跳检测，定时向服务端发送消息
        this.intervalId = setInterval(() => {
          wx.sendSocketMessage({
            data: JSON.stringify({
              "cmd": 13,
              "hbbyte": "-127"
            }),
          })
        }, 5000);
      })


      wx.onSocketMessage((result) => {
        const data = JSON.parse(result.data);
        if (data.command == 20 && data.code == 10018) {
          // 我们当前的聊天室是否存在历史消息
          if (data.data && data.data.groups && data.data.groups[this.groupId]) {
            // 满足这些条件之后，才可以设置历史消息
            this.setData({
              // 基于一个数组生成一个新的数组，用什么api
              danmuList: data.data.groups[this.groupId].map(item=>JSON.parse(item.content))
            })
          }
        }

        // 不管谁，有新消息，就会执行，监听到新消息的发送
        if (data.command == 11) {
          const content = JSON.parse(data.data.content);
          this.data.danmuList.push(content);
          // this.videoContext.sendDanmu(content)
          this.setData({
            danmuList:this.data.danmuList
          })
        }
      })

    })
  },
  onReady() {
    this.videoContext = wx.createVideoContext('mvVideo')
  },
  onUnload() {
    // 需要主动关闭socket连接
    wx.closeSocket()
    clearInterval(this.intervalId)
  },
  handleTimeUpdate(e){
    console.log();
    this.currentTime = Math.floor(e.detail.currentTime)
  },
  bindSendDanmu() {
    // 颜色
    const randomNum = Math.floor(Math.random() * colors.length)
    // 文本
    // 时间
    const content = {
      // 输入的值
      text:this.data.value,
      // 颜色
      color:colors[randomNum],
      // 获取到当前播放的时间
      time:this.currentTime==null?0:this.currentTime
    }

    // 发送消息
    const msgBody = {
      from: this.userName, // 发送人，当前用户的用户名
      createTime: new Date().getTime(), // 发送时间
      cmd: 11, // 命令固定内容
      group_id: this.groupId, // 分组id。  想要发送到哪个组里
      chatType: 1, //  聊天类型 固定内容
      msgType: 0, // 消息类型 固定内容
      // 只能放字符串
      content:JSON.stringify(content), // 消息内容，自己设计结构，比如你想发送图片（图片上传的接口）
      nickName: this.nickName, // 用户昵称
      avatar: this.avatar, // 用户头像
      type:'1' // 消息类型。 你可以自己设计，发送过去是什么，返回的就是什么（1: 普通文本 2: 图片 3：点赞 4， 送花）
    }

    // 向服务端发送数据 =》 发消息，告诉聊天室内的所有人，我要发送一条弹幕
    // 发送完成之后，消息没有展示出来
    wx.sendSocketMessage({
      data: JSON.stringify(msgBody),
    })

    // // 需要随机生成0～colors长度的一个随机数
    // // 0~1    5 => 0~5 => 向下取整
    // const randomNum = Math.floor(Math.random() * colors.length)

    // this.videoContext.sendDanmu({
    //   text: this.data.value,
    //   color: colors[randomNum]
    // })
  }
})